<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>NL4DV | Example Queries</title>

    <!--Favicon-->
    <link rel='shortcut icon' type='image/x-icon'
          href="{{ url_for('test_queries.static', filename='img/favicon.ico') }}"/>

    <!--Vendor CSS files-->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.css"
          rel="stylesheet">

    <!--Custom CSS files-->
    <link href="{{ url_for('test_queries.static', filename='css/style.css') }}" rel="stylesheet">

</head>
<body>
<div class="container-fluid">
    <br/>
    <div class="row">
        <div class="col-md-12">
            <button class="btn btn-primary" onclick="execute()">
                Execute
            </button>
        </div>
    </div>
    <br/>
    <div class="row">
        <div class="col-md-12">
            <div class="loadingModal"></div>


            <ul class="nav nav-tabs nav-justified">
                <li class="active"><a data-toggle="tab" href="#fullyspecified_attributes_tasks_vis">FULLY-SPECIFIED:
                    Attributes + Tasks + VIS</a></li>
                <li><a data-toggle="tab" href="#underspecified_attributes_tasks">UNDER-SPECIFIED: Attributes + Tasks</a>
                </li>
                <li><a data-toggle="tab" href="#underspecified_attributes_vis">UNDER-SPECIFIED: Attributes + VIS</a>
                </li>
                <li><a data-toggle="tab" href="#underspecified_attributes">UNDER-SPECIFIED: Attributes</a></li>
                <li><a data-toggle="tab" href="#other_examples">OTHERS</a></li>
            </ul>

            <div class="tab-content">
                <div id="fullyspecified_attributes_tasks_vis" class="tab-pane fade in active">
                    <br/>
                    <div class="overflow-y-auto custom-height">
                        <div class="table-responsive">
                            <table style="width:100%" class="table table-condensed table-bordered"
                                   id="fullyspecified-attributes-tasks-vis-table">
                                <thead>
                                <tr>
                                    <th class="t-head" width="30%">Query</th>
                                    <th class="t-head" width="70%">Recommendations</th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
                <div id="underspecified_attributes_tasks" class="tab-pane fade">
                    <br/>
                    <div class="overflow-y-auto custom-height">
                        <div class="table-responsive">
                            <table style="width:100%" class="table table-condensed table-bordered"
                                   id="underspecified-attributes-tasks-table">
                                <thead>
                                <tr>
                                    <th class="t-head" width="30%">Query</th>
                                    <th class="t-head" width="70%">Recommendations</th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
                <div id="underspecified_attributes_vis" class="tab-pane fade">
                    <br/>
                    <div class="overflow-y-auto custom-height">
                        <div class="table-responsive">
                            <div class="table-responsive">
                                <table style="width:100%" class="table table-condensed table-bordered"
                                       id="underspecified-attributes-vis-table">
                                    <thead>
                                    <tr>
                                        <th class="t-head" width="30%">Query</th>
                                        <th class="t-head" width="70%">Recommendations</th>
                                    </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="underspecified_attributes" class="tab-pane fade">
                    <br/>
                    <div class="overflow-y-auto custom-height">
                        <div class="table-responsive">
                            <table style="width:100%" class="table table-condensed table-bordered"
                                   id="underspecified-attributes-table">
                                <thead>
                                <tr>
                                    <th class="t-head" width="30%">Query</th>
                                    <th class="t-head" width="70%">Recommendations</th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
                <div id="other_examples" class="tab-pane fade">
                    <br/>
                    <div class="overflow-y-auto custom-height">
                        <div class="table-responsive">
                            <table style="width:100%" class="table table-condensed table-bordered"
                                   id="other-examples-table">
                                <thead>
                                <tr>
                                    <th class="t-head" width="30%">Query</th>
                                    <th class="t-head" width="70%">Recommendations</th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<!--JS files-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@4"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>

<script src="{{ url_for('test_queries.static', filename='js/global.js') }}"></script>
<script src="{{ url_for('test_queries.static', filename='js/utils.js') }}"></script>
<script src="{{ url_for('test_queries.static', filename='js/ui.js') }}" z></script>
<script src="{{ url_for('test_queries.static', filename='js/main.js') }}"></script>

</html>
